<template>
  <div class="login">
    <div class="login-box">
      <div class="title">选择登录方式</div>
      <div class="btn">
        <van-button type="primary" size="large" @click="showField">
          <i class="iconfont icon-weibiaoti1" style=" font-size: .19rem;color: white; margin-right:0.06rem"></i>
          <span>手机登录</span>
        </van-button>
      </div>
    </div>
    <div class="footer-img">
      <img src="https://cdn.yangkeduo.com/assets/img/login_footer.png">
    </div>

    <transition name="fade">
      <div class="login-input" v-show="show">
        <van-cell-group>
          <van-field v-model="phone" label="手机号" placeholder="请输入手机号" :error-message="errPhone" />
          <van-field v-model="code" center clearable label="短信验证码" placeholder="请输入短信验证码" :error-message="errCode">
            <van-button @click="getCode" slot="button" size="small" type="primary" :disabled="disabled">{{btntext}}</van-button>
          </van-field>
        </van-cell-group>
        <div class="field-btn">
          <van-button type="danger" size="large" @click="login">登录</van-button>
        </div>
        <div class="field-btn">
          <van-button plain type="danger" size="large" @click="backLogin">返回</van-button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import axios from "axios";
import { getCode, phoneLogin } from "../../api/getDatas";
export default {
  data() {
    return {
      show: false,
      phone: "",
      code: "",
      // 发送验证码按钮禁用
      disabled: false,
      // 禁用倒计时
      time: 0,
      // 按钮
      btntext: "发送验证码",

      errPhone: "",
      errCode: ""
    };
  },
  methods: {
    showField() {
      this.show = true;
    },
    backLogin() {
      this.show = false;
    },
    // 获取手机验证码
    getCode() {
      // 手机号码格式
      var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      this.errPhone = "";
      // 手机验证
      if (!this.phone) {
        this.errPhone = "请输入手机号";
      } else if (!reg.test(this.phone)) {
        this.errPhone = "手机号格式错误";
      } else {
        // 设置按钮禁用时间
        this.time = 60;
        this.disabled = true;
        // 按钮禁用倒计时
        this.timer();
        getCode(this.phone).then(res => {
          this.$toast(res.data.msg);
        });
      }
    },
    login() {
      // 手机验证
      var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      // 邮箱验证
      // var regEmail=/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
      this.errPhone = "";
      this.errCode = "";
      if (!this.phone) {
        this.errPhone = "请输入手机号";
        return;
      }
      if (!reg.test(this.phone)) {
        this.errPhone = "手机号格式错误";
        return;
      }
      if (!this.code) {
        this.errCode = "请输入验证码";
        return;
      }
      if (this.code.length < 6) {
        this.errCode = "验证码不得小于六位";
        return;
      }
      phoneLogin(this.phone, this.code).then(res => {
        if (res.data.code === 0) {
          // 返回登入成功
          // 保存用户信息
          this.userInfo = res.data.data;
          this.$store.commit("auth/AUTH_LOGIN_SUCCESS", this.userInfo);
          // 跳转到首页
          this.$router.back();
        } else {
          // 返回登录失败
          this.$toast(res.data.msg);
        }
      });
    },
    // 按钮禁用倒计时
    timer() {
      if (this.time > 0) {
        this.time--;
        this.btntext = this.time + "s后重新获取";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntext = "获取验证码";
        this.disabled = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(100%);
}
.login {
  .login-input {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #f1f2f6;
    .field-btn {
      margin-left: 0.12rem;
      margin-right: 0.12rem;
      margin-top: 0.12rem;
    }
  }
  .login-box {
    position: fixed;
    top: 25.7%;
    width: 100%;
    min-height: 130px;
    text-align: center;
    max-width: 640px;
    .title {
      text-align: center;
      color: #151516;
      letter-spacing: 0;
      margin-bottom: 0.41rem;
      font-size: 0.19rem;
    }
    .btn {
      margin: 0 0.4rem;
    }
  }
  .footer-img {
    position: fixed;
    bottom: 0.27rem;
    left: 50%;
    transform: translateX(-50%);
    img {
      width: 1.4rem;
    }
  }
}
</style>

